<template>
  <div class="game-board">
    <div
        v-for="(row, rowIndex) in gameMap"
        :key="rowIndex"
        class="row"
    >
      <SokobanCell
          v-for="(cell, colIndex) in row"
          :key="colIndex"
          :cell-type="cell"
          :position="{ x: colIndex, y: rowIndex }"
          @click="handleCellClick(rowIndex, colIndex)"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits,watchEffect } from 'vue';
import SokobanCell from './SokobanCell.vue';

defineProps({
  gameMap: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['cell-click']);

const handleCellClick = (row, col) => {
  emit('cell-click', { row, col });
};
// 确保地图更新时重新渲染
watchEffect(() => {
  // 强制更新每个单元格
  props.gameMap.forEach((row, y) => {
    row.forEach((cell, x) => {
      // 这里依赖关系会自动追踪
    });
  });
});
</script>

<style scoped>
.game-board {
  display: inline-block;
  border: 3px solid #333;
  background-image: url('@/assets/game/空地.png');
  width: 65vw; /* 强制与屏幕宽度一致 */
  aspect-ratio: 1/1; /* 保持宽高比，根据你的地图实际比例调整 */
  margin: 0 auto;
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;

}
</style>
